<script lang="ts" setup>
import useDarg from './useDarg'
import useSwipeX from './useSwipeX'

const dragOptions = useSwipeX({
  onDown() {},
  onStart() {},
  onMove(e) {
    console.log('🚀 -- onMove -- e', e)
  },
  onEnd() {},
  onSwipeLeft() {
    console.log('🚀 -- onSwipeLeft')
  },
  onSwipeRight() {
    console.log('🚀 -- onSwipeRight')
  },
  onSwipeNot() {},
})

const { touchstart, touchmove, touchend, touchcancel } = useDarg(dragOptions)
</script>
<template>
  <div
    class="SwipeXDemo"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
    @touchcancel="touchcancel"
  >
    SwipeX
  </div>
</template>

<style lang="scss">
.SwipeXDemo {
  width: 300px;
  height: 300px;
  background: #ddd;
}
</style>
